<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!--
    遇到数据修改之后，页面不更新的情况，如何办？

      一般出现在 Vue2
        1. 使用 set
        2. 使用强制更新 $forceUpdate 【不建议】
      
    数组变更方法有7个
      Vue2 - 由于 Object.defineProperty 的局限性，没办法直接监控数组的变化，这是Vue内部对这7个方法做了重写
      Vue3 - 使用的是 Proxy ，由于 Proxy 可以代理数组，于是没有重写了。

    
    Object.defineProperty 的局限性：
      1. 没法响应对象属性的新增与删除

        解决方法：
          1. Vue.set  | Vue.delete
          2. this.$set  | this.$delete

          语法：
            set(target, key, value)
            delete(target, key)
      
      2. 没有响应数组长度的变化

          解决方案：splice(2)

      3. 没有响应数组下标操作的修改

          解决方案：Vue.set | this.$set

          语法    set(target, index, value)

   -->
    <div id="app">
      <button @click="fn1">新增 sex 属性</button>
      <button @click="fn2">删除 age 属性</button>
      <button @click="fn3">修改 list 长度</button>
      <button @click="fn4">修改 list[1]</button>
      <ul>
        <li v-for="(value, key, index) in person">
          {{ key }} - {{ value }} - {{ index }}
        </li>
      </ul>

      <ul>
        <li v-for="item in list">{{ item }}</li>
      </ul>
    </div>

    <script type="module">
      import Vue from "./lib/vue2.esm.browser.js";

      new Vue({
        data() {
          return {
            person: {
              name: "张三",
              age: 18,
            },

            list: ["Apple", "Banana", "Orange"],
          };
        },

        methods: {
          fn1() {
            this.person.sex = "男";

            this.$forceUpdate() // 强制更新
            console.log("new person", this.person);

            // this.$set(this.person, "sex", "男");
            // console.log("new person", this.person);
          },

          fn2() {
            // delete this.person.age;
            // console.log("new person", this.person);

            this.$delete(this.person, "age");
            console.log("new person", this.person);
          },

          fn3() {
            // this.list.length = 2
            // console.log('new list', this.list)

            this.list.splice(2);
          },

          fn4() {
            // this.list[1] = '香蕉'

            this.$set(this.list, 1, "香蕉");
          },
        },
      }).$mount("#app");
    </script>

    <!-- <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      createApp({
        data() {
          return {
            person: {
              name: "张三",
              age: 18,
            },

            list: ["Apple", "Banana", "Orange"],
          };
        },

        methods: {
          fn1() {
            // Vue3 移除了 $set 因为用不少了。
            // console.log(this.$set)
            this.person.sex = '男'
          },

          fn2() {
            delete this.person.age;
          },

          fn3() {
            this.list.length = 2
          },

          fn4() {
            this.list[1] = '香蕉'
          },
        },
      }).mount("#app");
    </script> -->
  </body>
</html>
